<template>
  <el-dialog title="截屏" :close-on-click-modal="false" :visible.sync="visible" width="30%">
      <!--<div style="z-index: 9999" v-loading="dataListLoading" class="demo-image__preview">-->
        <!--&lt;!&ndash;<img width="320" height="280" :src="pic" />&ndash;&gt;-->
        <!--<el-image-->
          <!--style="width: 320px; height: 280px"-->
          <!--:src="pic"-->
          <!--:preview-src-list="srcList">-->
        <!--</el-image>-->
      <!--</div>-->
    <el-button type="primary" @click="getScreen()" icon="el-icon-refresh">刷新</el-button>
    <div class="demo-image__preview" v-loading="dataListLoading">
      <el-image
        style="width: 320px; height: 280px"
        :src="pic"
        :preview-src-list="srcList">
      </el-image>
    </div>
  </el-dialog>
</template>
<style scoped>
.el-dialog__body {
  padding: 10px !important;
}

.el-button.is-circle {
  padding: 7px !important;
}
</style>
<script>
// import fancyBox from 'vue-fancybox' a÷b
export default {
  name: 'screen-shot',
  data: function () {
    return {
      visible: false,
      dataListLoading: false,
      pic: '',
      mac: '',
      srcList:[],
    }
  },
  mounted () {
  },
  methods: {
    init (mac) {
      this.visible = true
      this.mac = mac
        // /generator/stb/screenShot
      // this.$socket.emit('screen-shot1', mac)
      // this.$socket.on('screen-shot-done', function (data) {
      //   this.imageList[0].url = data
      // })
      this.getScreen()
    },
    open (e) {
      this.visible = false
      // fancyBox(e.target, this.imageList)
    },
    getScreen(){
      this.pic = ''
      this.srcList = []
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/generator/stb/screenShot'),
        method: 'get',
        params: this.$http.adornParams({
          'mac': this.mac
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.srcList = []
          console.log('pic',data.pic)
          this.pic = data.pic
          this.srcList.push(data.pic)
        }
        this.dataListLoading = false
      })
    }
  }
}
</script>
